import { LocalizationContext } from "../../core";

import useDrop from "./useDrop";
import { FC, RefObject, useContext } from "react";

interface DropAreaProps {
  containerRef: RefObject<HTMLDivElement>;
  openFile(file: File): void;
}

const DropArea: FC<DropAreaProps> = ({ containerRef, openFile }) => {
  const { isDragging } = useDrop(containerRef, (files) => {
    if (files.length === 0) {
      return;
    }
    openFile(files[0]);
  });
  const l10n = useContext(LocalizationContext);

  return (
    <>
      {isDragging && (
        <div className="rpv-drop__area">
          <div className="rpv-drop__area-body">
            {l10n && l10n.drop
              ? l10n.drop.dragDropFile
              : "Drag and drop a PDF document here"}
          </div>
        </div>
      )}
    </>
  );
};

export default DropArea;
